<template lang="html">
    <div class="container_addcard">
	    <mt-header fixed title="添加银行卡">
		    <mt-button slot="left" icon="back" @click="Returnclick"></mt-button>
	    </mt-header>
	    <span style="color: #888;font-size: 0.35rem">请绑定本人有效储蓄卡</span>
	    <div class="cardtit_div">
		    <span class="name_title">姓名</span>
		    <span class="heights">{{userinfodata.name}}</span>
	    </div>
	    <div class="cardtit_div">
		    <span class="name_title">银行卡号</span>
		    <span>
			    <input type="text" v-model="cardNum" @change="cardname" placeholder="请输入您的储蓄卡号">
		    </span>
	    </div>
	    <div class="cardtit_div">
		    <span class="name_title">开户银行</span>
		    <span class="heights">
			    {{cardNamer.name}}
			    <span v-if="cardNamer ==''" style="color: #ccc">开户行</span>
		    </span>
	    </div>
	    <div class="cardtit_div">
		    <span class="name_title">预留手机号</span>
		    <span>
			    <input type="text" v-model="telphone" placeholder="预留手机号">
		    </span>
	    </div>
	    <button class="buttonaddcard" @click="create_card">确定</button>
    </div>
</template>
<script>
import app from '~/assets/api/config'
export default {
    data() {
        return {
            cardNum: '', //卡号
            cardNamer: '', //开户行
            telphone: '', //手机号
            userinfodata: [], //个人信息
            messSta: ''
        }
    },
    methods: {
        Returnclick() {
            //返回
            this.$router.go(-1)
        },
        create_card() {
            let _that = this
            let ngx = /^\d*$/
            if (!ngx.test(_that.cardNum)) {
                this.$Toast('请输入正确的银行卡号')
                return
            }
            if (_that.cardNum.length < 16 || _that.cardNum.length > 19) {
                this.$Toast('请输入正确的银行卡号')
                return
            }
            if (_that.cardNamer == '') {
                this.$Toast(this.messSta)
                return
            }
            var reg = /^[1][3456789][0-9]{9}$/
            if (!reg.test(_that.telphone)) {
                this.$Toast('手机号格式不正确')
                return
            }
            this.$axios
                .post(app.API_BES_URL + '/api/backend/v1/member/addBank', {
                    name: _that.userinfodata.name,
                    bankId: Number(_that.cardNamer.id),
                    bankNo: _that.cardNum,
                    mobile: Number(_that.telphone)
                })
                .then(function(res) {
                    if (res.data.code == 0) {
                        this.$Toast('添加成功')
                        _that.$router.go(-1)
                    }
                })
        },
        getuserinfo() {
            //获取个人信息
            this.$axios
                .get(app.API_BES_URL + '/api/backend/v1/member/getInfo')
                .then(res => {
                    if (res.data.code == 0) {
                        this.userinfodata = res.data.data
                    }
                })
        },
        cardname() {
            //获取开户行
            if (this.cardNum != '') {
                let ngx = /^\d*$/
                if (!ngx.test(this.cardNum)) {
                    this.$Toast('请输入正确的银行卡号')
                    return
                }
                if (this.cardNum.length < 16 || this.cardNum.length > 19) {
                    this.$Toast('请输入正确的银行卡号')
                    return
                }
                console.log(this.cardNum, 'dd')
                this.$axios
                    .post(
                        app.API_BES_URL +
                            '/api/backend/v1/member/getcardByBank',
                        { bankNo: this.cardNum }
                    )
                    .then(res => {
                        if (res.data.code === 200044) {
                            this.messSta = res.data.msg
                        }
                        this.cardNamer = res.data.data
                    })
            }
        }
    },
    mounted() {
        this.getuserinfo()
    }
}
</script>

<style scoped lang="less">
.container_addcard {
    margin: 0 auto;
    padding: 15px;
    background: #fff;
    padding-top:80px;
    .cardtit_div {
        margin-top: 15px;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom: 1.25px solid #eee;
        span {
            color: #808080;
            input {
                border: none;
                color: #808080;
                font-size:0.45rem;
            }
        }
        .name_title {
            font-size: 33.75px;
            width: 187.5px;
            display: block;
            float: left;
        }
        .heights {
            display: block;
            height: 45px;
            font-size:0.45rem;
        }
    }
    .buttonaddcard {
        width: 100%;
        margin-top: 150px;
        border-radius: 75px;
        border: none;
        height: 82.5px;
        outline: none;
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffdf00',endColorStr='#ffcd00',gradientType='1');
        background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
        background: -o-linear-gradient(left, #ffdf00, #ffcd00);
        background: -webkit-gradient(
            linear,
            0% 0%,
            100% 0%,
            from(#ffdf00),
            to(#ffcd00)
        );
        color: #000;
    }
    .buttonaddcard:active {
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ECC111',endColorStr='#E6C022',gradientType='1');
        background: -moz-linear-gradient(left, #ecc111, #e6c022);
        background: -o-linear-gradient(left, #ecc111, #e6c022);
        background: -webkit-gradient(
            linear,
            0% 0%,
            100% 0%,
            from(#ecc111),
            to(#e6c022)
        );
    }
}
</style>
<style>
html,body{
    background: #f8f8f9;
}
.mint-header {
    font-size: 0.45rem !important;
    height: 1.173333rem !important;
    background: #fff !important;
    color: #2e2e2e !important;
    border-bottom: 0.016667rem solid #f8f8f8 !important;
    line-height:1;
}
.mint-header-title {
    font-size: 0.426667rem !important;
}
.mint-header .mintui {
    font-size: 0.45rem;
}
</style>
</style>
